<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>腕带更换</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
		<script type="text/jscript" th:src="@{/plugin/jquery.min.js}"></script>
		<script>
		
		<!--翻页  -->
		function paging(args){
			//alert(args);
			var wriststrp_id=$("#wriststrp_id").val();
			var pageNum=$("#text").val();
			var total=$("#totalpage").val();

			//改变后的页面
			var page=parseInt(pageNum)+args;
			
			if(page<1||page>total){
				return;	
			}
			//刷新页面
			getpagebean(wriststrp_id,page);
			
		}	
		<!-- 读取pagebean的方法 -->
		function getpagebean(wriststrp_id,pageNum){
			
			//加载该对象的资金变动情况
			$.post("[[@{/balanceChange}]]",
					{
				"wriststrp_id": wriststrp_id,
				"pageNum": pageNum,
				"size" : 6
					},
					function(pageBean){
						if(pageBean==""||pageBean.beanList==null){
							alert("未能查询到数据");
							return;
						}
						//获取内容集合
						var data=pageBean.beanList;
						
						if(data!=""){
				
							//拼标签显示消费项
							var content="";
							//支付类型
							var type="";
							
					$.each(data,function(index,obj){
						if(obj.charge_type==1){
							type="现金充值";
						};
						if(obj.charge_type==2){
							type="支付宝充值";
						};
						if(obj.charge_type==3){
							type="腕带押金"; 
						};
						if(obj.charge_type==4){
							type="商品消费 "; 
						};
						content +=		
						'<tr ><td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">'
						+((index+1)+(pageNum-1)*6)
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+ (obj.amount>0 ? (("+")+obj.amount) : obj.amount)
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+ type
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+"水公园" 
						+'</td><td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">'
						+obj.create_time
						+'</td></tr>'	;
							});	
					
					//显示到表格
					$("#content").html(content);
					//分页菜单
					
					var pagecontent=
						'<a href="javaScript:paging(-1)" >上一页</a> '
					+' 第 <span>'
					+pageBean.pageIndex+'/'+pageBean.totalPage+'</span>页 '
					+' <a href="javaScript:paging(1)" >下一页</a>';
					//翻页菜单
					$("#pagemenu").html(pagecontent);
					
					//当前页码
					$("#text").val(pageBean.pageIndex);
					
					$("#totalpage").val(pageBean.totalPage);
				
							return;
						}
						alert("当前腕带信息未找到，请联系管理员 ");
					}
			);
			return;
			
		}
		//营业时间
		
		function showTime() {
		 var	nowtime = new Date();
		 var	year = nowtime.getFullYear();
		 var	month = nowtime.getMonth() + 1;
		 var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
		};
		
	$(function(){
		
		setInterval("showTime()", 1000);
	})
			
			//读取腕带信息 
			$(function(){
			
			$("#readmes1").mousedown(function(){
				
				$("#readmes1").css("font-size","15px");
			});
			$("#readmes1").mouseup(function(){
				
				$("#readmes1").css("font-size","18px");
				
				if($("#wriststrp_id").val()==""){
					
					alert("腕带编号不能为空"); return;
				}
				
				$.post(
						"[[@{/getCurrentMsg}]]",
						{
						wriststrp_id : $("#wriststrp_id").val()
						},
						function(data){
							
							if(data==""){
								alert("该腕带处于非使用状态"); 
								$("#typename").val("请读取腕带"); 
								$("#amount").val("");
								$("#tel").val("");
								$("#state").val("请读取腕带");
								return;
							}
							
							$("#typename").val(data.type_name);
							$("#amount").val(data.balance);
							$("#tel").val(data.tel);
							$("#state").val("正在使用");
						})
			});
			
			$("#readmes2").mousedown(function(){
				
				$("#readmes2").css("font-size","15px");
			});
			$("#readmes2").mouseup(function(){
				
				$("#readmes2").css("font-size","18px");
				
				if($("#newid").val()==""){
					alert("腕带信息不能为空");return;
				}
				
				
					$.post(
							"[[@{/gettype}]]",
							{
								wriststrap_id : $("#newid").val()
							},
							function(data){
							if(data!=""){	
								if(data.state!=0){
									alert("该腕带不是闲置状态，不能使用");
									$("#typemes").val("请读取腕带");
									$("#statemes").val("请读取腕带");  
									return;
								}
								//腕带类型 和状态显示到界面；
								$("#typemes").val(data.wriststrpType.type_name);
								$("#statemes").val("闲置状态"); 
								}else{
								alert("未获取到相关腕带信息！");
								}
								
							}
							
							);
				
			});
			
		})
		
		
		
			<!-- 模拟按键功能，点击div变小 -->
			
		$(function(){
			//查询按钮
			$("#query").mousedown(function(){
				$("#query").css("font-size","20px");
			});
			$("#query").mouseup(function(){
				$("#query").css("font-size","25px");
				
				//加载该对象的资金变动情况
				var wriststrp_id=$("#wriststrp_id").val();
				var pageNum=$("#text").val();
				getpagebean(wriststrp_id,pageNum);
				
			});
			
			//确认按钮
			$("#ok").mousedown(function(){
				$("#ok").css("font-size","20px");
			});
			$("#ok").mouseup(function(){
				$("#ok").css("font-size","25px");
			//如果被更换腕带为使用状态，更换腕带为闲置状态 可以进行下一步更换；
				if($("#state").val()=="正在使用" && $("#statemes").val()=="闲置状态"){
					
					//点击确认进入下一步
					if(confirm("是否确认将原腕带"+$("#wriststrp_id").val()+"更换为为"+$("#newid").val())){
					
						$.post(
							"[[@{/doreplace}]]"	,
							{
								oldwriststrapid: $("#wriststrp_id").val(),
								newwriststrapid: $("#newid").val(),
									tel:	$("#newtel").val(),
									customer_name:   $("#newname").val()
							},
							function(data){
								if(data!=""){
									alert(data);
									location.reload();
								}else{
									alert("系统错误，腕带更换失败！");
								}
							}
						)
					}
				}else{
					alert("请完善更换信息，再点击确定");
				}
			});
			
			//退出按钮
			$("#exit").mousedown(function(){
				$("#exit").css("font-size","20px");
			});
			$("#exit").mouseup(function(){
				$("#exit").css("font-size","25px");
			});
			
		})
		
		</script>
	</head>
	<body>
	<input  type="hidden" id="text">
	<input  type="hidden" id="totalpage">
		<!--最外层容器控制位置-->
		<div id="" class="container" style="height:500px; margin: 30px 100px;">
			<div id="" class="layui-row ">

				<!--  左边操作功能模块-->
				<div id="" class="layui-col-md12 layui-bg-gray" style="height: 500px;">
					<div id="" class="layui-row ">
						<!-- 左侧菜单框-->
						<div id="" class="layui-col-md10 " style=" height: 500px;">
							<!-- 印刷号 -->
							<div id="" class="layui-col-md8" style="border:#40AFFE 2px solid ; background-color: white; height: 130px;">
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px; font-size: 18px;color: red;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										印&nbsp;刷&nbsp;号：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="wriststrp_id" type="text" size="10" ; style="color: red;" />
									</div>
								</div>
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px;font-size: 18px;">
									<div id="readmes1" class="layui-col-md5" style="background-color:#007DDB;text-align:center;">
										读&nbsp;取&nbsp;腕&nbsp;带
									</div>
								</div>
							
								
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px;font-size: 18px;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										腕&nbsp;带&nbsp;类&nbsp;型：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="typename" type="text" size="10" value="请读取腕带" readonly="readonly" style="background-color: #D0D0D0;" />
									</div>
								</div>
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px;font-size: 18px;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										可&nbsp;用&nbsp;金&nbsp;额：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="amount" type="text" size="10" ; />
									</div>
								</div>
								
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px;font-size: 18px;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										腕&nbsp;带&nbsp;状&nbsp;态：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="state" type="text" size="10" value="请读取腕带"    readonly="readonly" style="background-color: #D0D0D0;" />
									</div>
								</div>
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px;font-size: 18px;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										手&nbsp;机&nbsp;号&nbsp;码：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="tel" type="text" size="10" ; />
									</div>
								</div>
	
							</div>
							
							<!-- 查询条件-->
							<div id="" class="layui-col-md4" style="border:#40AFFE 2px solid ; background-color: white; height: 130px;">
								<div id="" class="layui-col-md12" style="height: 40px; text-align: center;line-height: 40px; font-size: 18px;">
									<div id="" class="layui-col-md12" style="text-align: center;color: red;">
										更&nbsp;新&nbsp;用&nbsp;户&nbsp;信&nbsp;息
									</div>
									
									<div id="" class="layui-col-md5" style="text-align: center;">
										手&nbsp;机&nbsp;号：
									</div>
									<div id="" class="layui-col-md7" style="text-align: left;">
										<input id="newtel" type="text" size="10" ; />
									</div>
									<div id="" class="layui-col-md5" style="text-align: center;">
										用&nbsp;户&nbsp;名：
									</div>
									<div id="" class="layui-col-md7" style="text-align: left;">
										<input id="newname" type="text" size="10" ;  />
									</div>
								</div>
								</div>
								<!-- 新腕带信息-->
								<div id="" class="layui-col-md12" style="border:#40AFFE 2px solid ; background-color: white; height: 60px;">
								<div id="" class="layui-col-md4" style="height: 40px; text-align: center;line-height: 40px; font-size: 15px;color: red;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										印&nbsp;刷&nbsp;号：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="newid"  type="text" size="10" ; style="color: red;" />
									</div>
								</div>
								<div id="" class="layui-col-md2" style="height: 40px; text-align: center;line-height: 40px;font-size: 18px;">
									<div id="readmes2" class="layui-col-md10" style="background-color:#007DDB;text-align:center;">
										读&nbsp;取&nbsp;腕&nbsp;带
									</div>
								</div>
								<div id="" class="layui-col-md3" style="height: 40px; text-align: center;line-height: 40px;font-size: 15px;">
									<div id="" class="layui-col-md5" style="text-align: center;">
										腕&nbsp;带&nbsp;类&nbsp;型：
									</div>
									<div id="" class="layui-col-md7" style="text-align: center;">
										<input id="typemes" type="text" size="10" value="请读取腕带" readonly="readonly" style="background-color: #D0D0D0;" />
									</div>
								</div>
								<div id="" class="layui-col-md3" style="height: 40px; text-align: center;line-height: 40px;font-size: 15px;">
									<div id="" class="layui-col-md5" style="text-align: center;">
										腕&nbsp;带&nbsp;状&nbsp;态：
									</div>
									<div id="" class="layui-col-md7" style="text-align: center;">
										<input id="statemes" type="text" size="10" value="请读取腕带" readonly="readonly" style="background-color: #D0D0D0;"   />
									</div>
								</div>
								</div>
							<!-- 消费项目列表 -->
							<div id="" class="layui-col-md12" style="margin-top: 5px; background-color: #93D1FF;font-size: 20px; height: 30px;">
								&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list" style="font-size: 20px;"></i>消费项目列表
							</div>
							<div id="" class="layui-col-md12">
								<table border="1px" bordercolor="#f2f2f2" width="100%">
									<tr bgcolor="#007DDB">
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">消费项目</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">金额</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">交易类型</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">商户名称</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">时间</td>
									</tr>
									<tbody id="content">
									
									</tbody>
									
								</table>
							</div>
							<!-- 翻页 -->
							<div id="pagemenu" class="layui-col-md12"  style=" position:absolute; text-align:center; font-size:20px;  bottom:20px; ">
							</div>
						</div>

						<!-- 右侧菜单-->
						<div id="" class="layui-col-md2" style="height: 500px; ">
							<div id="" style=" width: 100%; color: white;  text-align: center;">

								<div id="query"  style="text-align: center; background-color: #01AAED; font-size: 25px; margin: 15px;border: #009688 1px solid; width: 75%;height: 75px;line-height: 75px;">
									<i class="layui-icon layui-icon-search" style="font-size: 25px;"></i> 查询
								</div>
								<div id="ok"  style="text-align: center; background-color: #00FF00; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%;height: 75px;line-height: 75px;">
									<i class="layui-icon layui-icon-ok" style="font-size: 25px;"></i>确定
								</div>
								<div id="exit"  style="text-align: center; background-color: #FF5722; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%;height: 75px;line-height: 75px;">
									<i class="layui-icon layui-icon-close" style="font-size: 25px;"></i>关闭
								</div>
							</div>



							</table>
						</div>
					</div>


				</div>
			</div>
			<!-- 页脚-->
				<div class="layui-row layui-bg-gray" style="text-align: center;">
					<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
					<div id="mytime2"  class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"></div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
				</div>
		</div>

		</div>

	</body>
</html>
